<template>
  <div
    class="tyItem"
    :style="{
      borderBottom: tyVlaue != '---' ? '#e6e6e6' : 'none',
    }"
  >
    <div
      class="tyTitle"
      :style="{
        fontSize: '20px',
      }"
    >
       <div class="line"></div>
       {{ content }}
       <dv-decoration-3 style="width:130px;height:30px;" />
    </div>
    <div
      class="tyValue"
      :style="{
        color: tyColor,
        fontSize: tySize,
      }"
      v-if="!isTitle"
    >
      {{ tyVlaue }}
    </div>
  </div>
</template>

<script>
export default {
  props: {
    size: {
      type: String,
      default: "24px",
    },
    content: {
      type: String,
      default: "---",
    },
    tyColor: {
      type: String,
      default: "#fff",
    },
    tySize: {
      type: String,
      default: "45px",
    },
    tyVlaue: {
      type: [Number, String],
      default: 0,
    },
    isTitle: {
      type: Boolean,
      default: false,
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.tyItem {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  border-bottom: 1px dashed #e6e6e6;
}
.tyTitle {
  .line{
    height: 75%;
    min-height: 25px;
    width: 5px;
    background-color: #70d4e1;
    border-radius: 15%;
    margin: 0 10px 0 5px;
  }
  height: 30%;
  width: 100%;
  padding: 10px;
  font-weight: bold;
  display: flex;
  align-items: center;
  .dv-decoration-3{
    margin-left: auto;
  }
}
.tyValue {
  width: 100%;
  flex: 1;
  font-size: 30px;
  padding: 10px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 60px;
  transform: translateY(-10%);
}
.tyValue:hover {
  text-decoration: underline;
  cursor: pointer;
  text-decoration-color: #e6e6e6;
}
</style>